<template>
  <div class="app-container">

    <!-- 秒杀列表 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="秒杀商品" name="first">
        <el-table
          v-loading="listLoading"
          :data="list"
          border
          :row-class-name="rowClassName"
          style="width: 100%;margin-top: 10px;">

          <el-table-column
            label="序号"
            width="70"
            align="center">
            <template slot-scope="scope">
              {{ (page - 1) * limit + scope.$index + 1 }}
            </template>
          </el-table-column>

          <el-table-column prop="goodsName" label="商品名称" align="center"/>
          <el-table-column prop="goodsPrice" label="秒杀价格" align="center"/>
          <el-table-column prop="goodsTitle" label="商品标题" align="center"/>
          <el-table-column prop="startDate" align="center" label="开始时间" />
          <el-table-column prop="endDate" align="center" label="结束时间" />

          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                icon="el-icon-view"
                @click="view(scope.row)"
              >进入详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 普通列表 -->
      <el-tab-pane label="所有商品" name="second">
        <el-table
          v-loading="listLoading"
          :data="list"
          border
          style="width: 100%;margin-top: 10px;">

          <el-table-column
            label="序号"
            width="70"
            align="center">
            <template slot-scope="scope">
              {{ (page - 1) * limit + scope.$index + 1 }}
            </template>
          </el-table-column>

          <el-table-column prop="goodsName" label="商品名称" align="center"/>
          <el-table-column prop="goodsTitle" label="商品标题" align="center"/>
          <el-table-column prop="goodsImg" label="商品图片" align="center">
            <template v-slot="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.goodsImg"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="goodsPrice" label="商品价格" align="center"/>
          <el-table-column prop="goodsStock" label="商品库存" align="center"/>
          <el-table-column prop="createDate" label="创建时间" align="center"/>

          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="update(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 分页组件 -->
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />
    <el-dialog title="修改" :visible.sync="dialogVisible" width="40%">
      <el-form ref="dataForm" :model="goodsObj" label-width="100px" size="small" style="padding-right: 40px;">
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="goodsObj.goodsName"/>
        </el-form-item>
        <el-form-item label="商品标题" prop="goodsTitle">
          <el-input v-model="goodsObj.goodsTitle"/>
        </el-form-item>
        <el-form-item label="商品图片" prop="goodsTitle">
          <el-image
            style="width: 100px; height: 80px"
            :src="goodsObj.goodsImg"
          ></el-image>
        </el-form-item>
        <el-form-item label="商品价格" prop="goodsPrice">
          <el-input v-model="goodsObj.goodsPrice"/>
        </el-form-item>
        <el-form-item label="秒杀价格" prop="seckilPrice">
          <el-input v-model="goodsObj.seckilPrice"/>
        </el-form-item>
        <el-form-item label="开始时间" prop="startDate">
          <el-input v-model="goodsObj.startDate"/>
        </el-form-item>
        <el-form-item label="结束时间" prop="endDate">
          <el-input v-model="goodsObj.endDate"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" icon="el-icon-refresh-right" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="this.updLoad" icon="el-icon-check" size="small" @click="saveOrUpdate()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style lang="scss">
  .el-table .warning-row {
    background: oldlace
  }
</style>
<script>

import { getPageList, getGoodsPage, getById, updateGoods } from '@/api/seck/seckill'

export default {
  data() {
    return {
      listLoading: false,
      list: null,
      total: 0,
      page: 1,
      limit: 10,
      searchObj: {},

      goodsObj: {},

      createTimes: [],

      dialogVisible: false,

      activeName: 'first',
      updLoad: false
    }
  },
  created() {
    // 调用列表方法
    this.fetchData()
  },
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.name
      this.fetchData()
    },

    fetchData(page = 1) {
      this.page = page
      if (this.activeName === 'first') {
        getPageList(this.page, this.limit)
          .then(response => {
            this.list = response.data.records
            this.total = response.data.total
          })
      } else {
        getGoodsPage(this.page, this.limit)
          .then(res => {
            this.list = res.data.records
            this.total = res.data.total
          })
      }
    },
    view(row) {
      this.$router.push('/seckill/goodDetails?id=' + row.id)
    },
    update(row) {
      getById(row.id).then(res => {
        if (res.code === 200) {
          this.goodsObj = res.data
          this.dialogVisible = true
        } else {
          this.$message.error(res.message)
        }
      })
    },
    saveOrUpdate() {
      this.updLoad = true
      updateGoods(this.list).then(res => {
        if (res.code === 200) {
          this.$message.success('修改成功!')
          this.dialogVisible = false
          this.fetchData()
        } else {
          this.$message.error(res.message)
        }
        this.updLoad = false
      })
    },

    rowClassName({ row }) {
      const da = new Date().getTime()
      const start = new Date(row.startDate).getTime()
      const end = new Date(row.endDate).getTime()
      if (da >= start && da <= end) {
        return 'warning-row'
      }
    }

  }
}
</script>
